Lawz's blog

# gulp 本地调试增加代理及热更新

# 背景

胖模式项目技术栈为backbone.js+gulp，之前调试都是用nginx将接口代理到环境上，每次改完代码得手动刷新，而且会回到首页，得手动切换到正在调试的tab页才行，过程繁琐。

于是用gulp搭了个本地服务器，有代理接口、热更新、刷新留在本页面三个功能。

# 实现

# 热更新及接口代理

这里使用gulp-webserver来实现热更新

使用http-proxy-middleware中间件来代理接口

安装：

npm i gulp-webserver http-proxy-middleware -D

使用：

专门写个dev.config.js来记录端口号和接口转发网址

/**
 * 设置本地服务配置
 * @type {{port: number, proxyTarget: string}}
 * proxyTarget： 需代理到的路径
 * port： 本地启动的端口
 */
module.exports = {
    proxyTarget: 'https://200.200.95.89',
    port: 8889
}

dev环境的gulp设置gulp-dev.js

这里使用根目录作为监听范围，使得目录内的所有文件更改都会触发刷新

代理那里必须加上secure: false，不然代理会报错500

const webserver = require('gulp-webserver');
const proxy = require('http-proxy-middleware')

const devConfig = require('./dev.config')

gulp.task('webserver', function () {
    gulp.src('./')
        .pipe(webserver({
            host: 'localhost',
            port: devConfig.port,
            livereload: true,
            open: './index.html',
            directoryListing: {
                enable: true,
                path: './'
            },
            middleware: [
                proxy.createProxyMiddleware('/cgi-bin/', { //创建反向代理
                    target: devConfig.proxyTarget,
                    changeOrigin: true,
                    secure: false
                })
            ]
        }))
});

再在package.json中写个命令

"dev": "node node_modules/gulp/bin/gulp.js dev --gulpfile gulp-dev.js"

好了，npm run dev即可跑起来了

# 刷新保留本页面

跑起来后发现，一更改触发刷新会回到首页去了，这很影响效率，下面就来解决它。

找到构建菜单的js：build-menu.js

记录一个常量，用来做本地存储的key

// 用于本地存储点击的页面名的key
var DEBUG_URL_KEY = 'debugUrl';

构建菜单的时候

// 判断是本地环境，默认为是debug环境 挂在window下，方便别的地方要是要用也能获取到
APF.isDebug = location.hostname === 'localhost'

在菜单的点击事件中添加页面名缓存记录

if (APF.isDebug) {
	localStorage.setItem(DEBUG_URL_KEY, menuItem.trigger)
}

构建完菜单

从localStorage里取上一次缓存的页面名，并打开

if (APF.isDebug) {
	APF.trigger(localStorage.getItem(DEBUG_URL_KEY))
}

这样在代码改变，触发热更新后，会从缓存中取出上一次的页面名并打开，从而实现了类似webpack的HRM热模块更新效果。

# 总结

通过上面的一系列手段，大大的提升了胖模式下的开发速度，让开发人员专心于开发，减少对搭建环境的关注。

← 背景 →